<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background: #ee1166;
            transition: width 2s;
            -moz-transition: width 2s;
            /* Firefox 4 */
            -webkit-transition: width 2s;
            /* Safari and Chrome */
            -o-transition: width 2s;
            /* Opera */
        }

        div:hover {
            width: 300px;
        }

        {#div {#}
        {#    width: 100px;#}
        {#    height: 100px;#}
        {#    background: #1199ff;#}
        {#    position: relative;#}
        {#    animation: mymove 5s infinite;#}
        {#    -webkit-animation: mymove 5s infinite;#}
        {#}#}
        {##}
        {#@keyframes mymove {#}
        {#    from {#}
        {#        left: 0px;#}
        {#    }#}
        {#    to {#}
        {#        left: 200px;#}
        {#    }#}
        {#}#}
        {##}
        {#@-webkit-keyframes mymove {#}
        {#    from {#}
        {#        left: 0px;#}
        {#    }#}
        {#    to {#}
        {#        left: 200px;#}
        {#    }#}
        {#}#}

    </style>
</head>
<body>

<div>
    sssss
</div>

</body>
</html>